<!DOCTYPE html>
<!--
Template Name: Nonuxor
Author: <a href="http://www.os-templates.com/">OS Templates</a>
Author URI: http://www.os-templates.com/
Licence: Free to use under our free template licence terms
Licence URI: http://www.os-templates.com/template-terms
-->
<html>
<head>
<title>vue学习练手，直接在静态页面上修改，处动态效果</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body id="top">
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- Top Background Image Wrapper -->
<div id="vueId1" class="bgded overlay" style="background-image:url('images/demo/backgrounds/background-01.jpg');">
  <!-- ################################################################################################ -->
  <div class="wrapper row1">
    <header id="header" class="hoc clear"> 
      <!-- ################################################################################################ -->
      <div id="logo" class="fl_left">
        <h1><a href="index.html">{{message}}</a></h1>
      </div>
      <nav id="mainav" class="fl_right">
        <ul class="clear">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a class="drop" href="#">动态加载菜单</a>
            <ul>
                <li  v-for="item in pages"><a href="">{{item.name}}</a></li>
              <!--<li><a href="pages/gallery.html">Gallery</a></li>
              <li><a href="pages/full-width.html">Full Width</a></li>
              <li><a href="pages/sidebar-left.html">Sidebar Left</a></li>
              <li><a href="pages/sidebar-right.html">Sidebar Right</a></li>
              <li><a href="pages/basic-grid.html">Basic Grid</a></li>-->
            </ul>
          </li>
          <li><a class="drop" href="#">动态加载二级菜单</a>
            <ul>
              <li><a href="#">Level 2</a></li>
              <li><a class="drop" href="#">动态2级菜单</a>
                <ul>
                    <li  v-for="item in pages"><a href="">{{item.name}}</a></li>
                </ul>
              </li>
              <li><a href="#">Level 2</a></li>
            </ul>
          </li>
        </ul>
      </nav>
      <!-- ################################################################################################ -->
    </header>
  </div>
  <!-- ################################################################################################ -->
  <!-- ################################################################################################ -->
  <!-- ################################################################################################ -->
  <div id="pageintro" class="hoc clear"> 
    <!-- ################################################################################################ -->
    <article class="introtxt">
      <h2 class="heading">{{message}}</h2>
      <p>Erat volutpat vivamus et velit at risus.</p>
      <footer><a class="btn inverse" href="javascript:void(0)" v-on:click="helloworld()">试试Vue绑定方法</a></footer>
    </article>
    <!-- ################################################################################################ -->
    <div class="clear"></div>
  </div>
  <!-- ################################################################################################ -->
</div>
<!-- End Top Background Image Wrapper -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################
<div class="wrapper row3">
  <main class="hoc container clear"> 
    <div class="group center">
      <article class="one_quarter first"><i class="icon fa fa-archive"></i>
        <h4 class="font-x1"><a href="#">Tristique</a></h4>
        <p>Quam nullam orci a leo duis eros ligula ut nibh nec tempor turpis duis quis facilisis tortor quis rhoncus sem.</p>
      </article>
      <article class="one_quarter"><i class="icon fa fa-fire"></i>
        <h4 class="font-x1"><a href="#">Semper</a></h4>
        <p>Elementum magna vestibulum euismod nunc in accumsan justo duis metus justo pulvinar vel nulla at rutrum.</p>
      </article>
      <article class="one_quarter"><i class="icon fa fa-recycle"></i>
        <h4 class="font-x1"><a href="#">Tempus</a></h4>
        <p>Bibendum diam fusce tellus erat blandit sed augue et blandit sodales risus quisque semper purus libero.</p>
      </article>
      <article class="one_quarter"><i class="icon fa fa-rouble"></i>
        <h4 class="font-x1"><a href="#">Blandit</a></h4>
        <p>Ornare enim sollicitudin a in at tristique dolor aliquam eget arcu elit sed laoreet turpis vitae tincidunt tristique.</p>
      </article>
    </div>
    <div class="clear"></div>
  </main>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################
<div class="wrapper">
  <div class="split clear" style="background-image:url('images/demo/backgrounds/background-02.jpg');">
    <section class="box"> 
      <div class="btmspace-50">
        <p class="nospace"><a href="#">Sit amet arcu sed rutrum</a></p>
        <h2 class="heading">Proin quis nisi arcu</h2>
        <p>Elit dignissim ante interdum cursus urna augue ut ligula aliquam.</p>
      </div>
      <ul class="nospace elements">
        <li>
          <article><a href="#" class="icon"><i class="fa fa-glass"></i></a>
            <h6 class="heading">Aliquam nibh sollicitudin</h6>
            <p>Gravida neque vitae elit lacinia faucibus donec tincidunt porta faucibus ut massa nisi egestas non nunc eu scelerisque vulputate dui proin sed&hellip;</p>
          </article>
        </li>
        <li>
          <article><a href="#" class="icon"><i class="fa fa-globe"></i></a>
            <h6 class="heading">Pulvinar nam ut fringilla</h6>
            <p>Hendrerit felis maecenas et lacus dui nulla dictum tortor vitae venenatis malesuada est elit ornare massa nec rutrum massa nisi quis justo etiam&hellip;</p>
          </article>
        </li>
        <li>
          <article><a href="#" class="icon"><i class="fa fa-shekel"></i></a>
            <h6 class="heading">Tortor nunc tristique</h6>
            <p>Molestie augue eu volutpat elementum sed quis quam nibh phasellus sit amet suscipit justo consectetur adipiscing elit morbi rhoncus egestas&hellip;</p>
          </article>
        </li>
      </ul>
    </section>
  </div>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div id="vueId2" class="wrapper row3">
  <section id="latest" class="hoc container clear"> 
    <!-- ################################################################################################ -->
    <div class="center btmspace-50">
      <p class="nospace"><a href="#">View More</a></p>
      <h2 class="heading">v-for v-bind语法</h2>
      <p>下面的列表是动态加载出来的，其中每行的第一个需要多加一个css，通过计算动态加载</p>
    </div>
    <ul class="nospace group">
      <li class="one_third" v-for="(detail,index) in details" v-bind:class="index%3===0?'first':''">
        <article>
          <figure><img src="images/demo/320x210.png" alt="">
            <figcaption><a class="btn medium" href="#">Details{{index+1}}</a></figcaption>
          </figure>
          <div class="excerpt">
            <time datetime="2045-04-06">6<sup>th</sup> April</time>
            <h6 class="heading">{{detail.head}}</h6>
            <p>{{detail.descp}}&hellip;</p>
          </div>
        </article>
      </li>
      <!--<li class="one_third">
        <article>
          <figure><img src="images/demo/320x210.png" alt="">
            <figcaption><a class="btn medium" href="#">Details</a></figcaption>
          </figure>
          <div class="excerpt">
            <time datetime="2045-04-05">5<sup>th</sup> April</time>
            <h6 class="heading">Turpis scelerisque</h6>
            <p>Faucibus mauris eget rhoncus consequat vestibulum volutpat&hellip;</p>
          </div>
        </article>
      </li>
      <li class="one_third">
        <article>
          <figure><img src="images/demo/320x210.png" alt="">
            <figcaption><a class="btn medium" href="#">Details</a></figcaption>
          </figure>
          <div class="excerpt">
            <time datetime="2045-04-04">4<sup>th</sup> April</time>
            <h6 class="heading">Condimentum erat</h6>
            <p>Dignissim lectus ipsum egestas molestie justo consectetur mauris&hellip;</p>
          </div>
        </article>
      </li>
      <li class="one_third first">
        <article>
          <figure><img src="images/demo/320x210.png" alt="">
            <figcaption><a class="btn medium" href="#">Details</a></figcaption>
          </figure>
          <div class="excerpt">
            <time datetime="2045-04-04">4<sup>th</sup> April</time>
            <h6 class="heading">Condimentum erat</h6>
            <p>Dignissim lectus ipsum egestas molestie justo consectetur mauris&hellip;</p>
          </div>
        </article>
      </li>
      <li class="one_third">
        <article>
          <figure><img src="images/demo/320x210.png" alt="">
            <figcaption><a class="btn medium" href="#">Details</a></figcaption>
          </figure>
          <div class="excerpt">
            <time datetime="2045-04-04">4<sup>th</sup> April</time>
            <h6 class="heading">Condimentum erat</h6>
            <p>Dignissim lectus ipsum egestas molestie justo consectetur mauris&hellip;</p>
          </div>
        </article>
      </li>-->
    </ul>
    <!-- ################################################################################################ -->
  </section>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper bgded overlay coloured" style="background-image:url('images/demo/backgrounds/03.png');">
  <div class="hoc container clear"> 
    <!-- ################################################################################################ -->
    <article class="center">
      <h2 class="heading font-x3">Sollicitudin sapien tincidunt purus eu auctor sollicitudin turpis leo</h2>
      <p class="btmspace-30">Urna sed massa sed vestibulum nisi eu est laoreet.</p>
      <footer><a class="btn medium" href="#">Cursus vivamus</a></footer>
    </article>
    <!-- ################################################################################################ -->
  </div>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row4">
  <footer id="footer" class="hoc clear"> 
    <!-- ################################################################################################ -->
    <div class="one_quarter first">
      <h6 class="title">Eget neque mattis</h6>
      <p>Lacinia curabitur vulputate purus nibh in dapibus diam tempus quis proin lobortis metus vel consequat varius tincidunt mauris at.</p>
      <p>Finibus lorem ligula interdum ipsum vel venenatis magna quam at libero nullam mattis scelerisque convallis.</p>
    </div>
    <div class="one_quarter">
      <h6 class="title">Aliquam sed velit</h6>
      <ul class="nospace linklist contact">
        <li><i class="fa fa-map-marker"></i>
          <address>
          Street Name &amp; Number, Town, Postcode/Zip
          </address>
        </li>
        <li><i class="fa fa-phone"></i> +00 (123) 456 7890<br>
          +00 (123) 456 7890</li>
        <li><i class="fa fa-fax"></i> +00 (123) 456 7890</li>
        <li><i class="fa fa-envelope-o"></i> info@domain.com</li>
      </ul>
    </div>
    <div class="one_quarter">
      <h6 class="title">Sagittis vitae eros</h6>
      <ul class="nospace linklist">
        <li><a href="#">Eu augue semper non elit</a></li>
        <li><a href="#">Amet enim molestie mattis</a></li>
        <li><a href="#">Euismod nisi nunc interdum</a></li>
        <li><a href="#">Felis hendrerit non efficitur</a></li>
        <li><a href="#">Augue placerat integer ligula</a></li>
      </ul>
    </div>
    <div class="one_quarter">
      <h6 class="title">Nec consectetur</h6>
      <ul class="nospace linklist">
        <li>
          <article>
            <h2 class="nospace font-x1"><a href="#">Quam fusce cursus</a></h2>
            <time class="font-xs block btmspace-10" datetime="2045-04-06">Friday, 6<sup>th</sup> April 2045</time>
            <p class="nospace">Blandit eleifend maximus class aptent taciti sociosqu litora&hellip;</p>
          </article>
        </li>
        <li>
          <article>
            <h2 class="nospace font-x1"><a href="#">Massa amet aliquam</a></h2>
            <time class="font-xs block btmspace-10" datetime="2045-04-05">Thursday, 5<sup>th</sup> April 2045</time>
            <p class="nospace">Per conubia nostra inceptos himenaeos etiam quis lacus&hellip;</p>
          </article>
        </li>
      </ul>
    </div>
    <!-- ################################################################################################ -->
  </footer>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row5">
  <div id="copyright" class="hoc clear"> 
    <!-- ################################################################################################ -->
    <p class="fl_left">Copyright &copy; 2016 - All Rights Reserved - <a href="#">Domain Name</a></p>
    <p class="fl_right">Template by <a target="_blank" href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
    <!-- ################################################################################################ -->
  </div>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<!-- JAVASCRIPTS -->
<script src="layout/scripts/vue.js"></script>
<script type="application/javascript">
    var data = {
        message:"这是动态加载的文字",
        pages:[
            {url:"www.baidu.com", name:"baidu"},
            {url:"www.bing.com", name:"bing"},
            {url:"www.163.com", name:"163"},
            {url:"www.taobao.com", name:"taobao"}
        ]

    };
    var vm1 = new Vue({
        el:'#vueId1',
        data:data,
        methods:{
            helloworld:function(){
                this.message = "动态绑定的方法，触发修改文字";
            }
        }
    });
    var vm2 = new Vue({
        el:'#vueId2',
        data:{
            details:[
                {head:"header1", descp:"this is description1"},
                {head:"header2", descp:"this is description1"},
                {head:"header3", descp:"this is description1"},
                {head:"header4", descp:"this is description1"},
                {head:"header5", descp:"this is description1"},
                {head:"header6", descp:"this is description1"},
                {head:"header7", descp:"this is description1"},
                {head:"header8", descp:"this is description1"},
            ]
        }
    });


</script>
</body>
</html>